import React, { Component } from 'react'
import { withRouter } from 'react-router-dom'
import { connect } from 'react-redux'
import actionCreator from '@/store/actionCreator'
import { collectReq } from '@/utils/request'
import { USERCHANGE } from '@/store/actionType'
import * as ReactMarkdown from 'react-markdown'
import { Table, Button, Modal, message } from 'antd'
// import { Resizable } from 'react-resizable';
import { DeleteOutlined, ExclamationCircleOutlined, PlaySquareOutlined } from '@ant-design/icons'
const { confirm } = Modal
const mapStateToProps = (state, ownProps) => {
  return {
    collectList: state.getIn(['user', 'obj', 'collectList'])
  }
}
const mapDispatchToProps = {
  getCollect: (data) => {
    return collectReq(data).then(res => {
      return {
        type: USERCHANGE,
        payload: res.result
      }
    })
  },
  setBreadList: actionCreator.setBreadList
}

@withRouter
@connect(mapStateToProps, mapDispatchToProps)
class Collect extends Component {
  constructor(props) {
    super(props)
    this.state = {
      columns: [
        {
          title: '作者',
          key: 'author',
          dataIndex: 'author',
          ellipsis: true,
        },
        {
          title: '标题',
          key: 'title',
          dataIndex: 'title',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: '',
          key: 'action',
          render: (record) => <span>
            <Button size="small" type="primary" shape="circle" icon={<PlaySquareOutlined />} onClick={() => this.gotoDetails(record)} />&nbsp;
            <Button size="small" type="primary" shape="circle" icon={<DeleteOutlined />} onClick={() => this.actionFunc(record)} />
          </span>,
          // ellipsis: true,//不省略
        }
      ]
    }
  }
  componentDidMount() {
    this.props.setBreadList(['发布文章', '我的收藏'])
  }

  render() {
    const { collectList } = this.props
    const { columns } = this.state
    return (
      <div>
        <Table
          pagination={false}
          columns={columns}
          dataSource={collectList}
          size="middle"
          rowKey={(record) => {
            return record._id
          }}
          expandable={{
            expandedRowRender: record => <ReactMarkdown
              source={record.text.substr(0, 50)}
            // 如果您处于受信任的环境中，并且想解析和呈现HTML，则需要使用该html-parser插件。对于默认配置，请导入react-markdown/with-html而不是默认值：
            // escapeHtml={false}
            />,
            // 是否可以展开
            rowExpandable: record => record.text.length > 50,
          }}
        />
      </div>
    )
  }
  // 取消收藏
  actionFunc = (record) => {
    const { collectList, getCollect } = this.props
    confirm({
      title: '确认删除?',
      icon: <ExclamationCircleOutlined />,
      centered: true,
      content: '标题为: ' + record.title,
      okType: 'danger',
      okText: '确认',
      cancelText: '取消',
      onOk: () => {
        getCollect({ collectList: collectList.filter(item => item._id !== record._id) }).then(() => {
          // 文字提示
          message.success({ duration: 1, content: '取消收藏' })
        })
      },
      onCancel() {
        // console.log('Cancel');
      },
    })
  }
  // 去详情
  gotoDetails = (record) => {
    this.props.history.push('/blog/details/' + record._id)
  }
}
export default Collect
